<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	response.setContentType("text/html;charset=utf-8");   
	response.setCharacterEncoding("utf-8"); 
	
	String basePath = request.getScheme() + "://"
	        + request.getServerName() + ":" + request.getServerPort() + path;
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>活动管理</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/public.css" />
    

    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/footable/footable.core.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/dataTables/css/jquery.dataTables.min.css"/>
    <link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
</head>
<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInRight">
    <div class="container-fluid">
        
        <div class="row">
            <div class="col-md-12">
			   <div class="ibox">
			    <div class="ibox-content text-right" style="height: 70px">
                    <div class="col-md-3 input-group pull-left">
                        <input id="keyWord" type="text" placeholder="按名字搜索" class="input form-control">
                        <span class="input-group-btn">
                            <button id="selectCardListByName" type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
                        </span>
                    </div>
                    <div class="col-md-6"></div>
                    <div class="col-md-3">
                        <h3>
                            <span>
                            <shiro:hasPermission name="markting_business_card:create">
                            <button id="create_model" type="button" class="btn btn-primary" onclick="window.location.href='<%=path%>/view/ui/companyCard?type=create&model_id=2'">新建名片</button>
                            </shiro:hasPermission>
                            </span>
                        </h3>
                    </div>
			    </div>
			   </div>   
			 </div> 
        
        
            <%-- <div class="col-md-12">
                <table class="table table-bordered table-hover  white-bg">
                    <thead>
                        <tr>
                            <th>名片概览</th>
                            <th>手机号码</th>
                            <th>打开数</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="card_list">
                    </tbody>
                </table>
                <div id="content_empty" hidden="" class="form-group white-bg" style="text-align:center;padding:200px 0;margin:0;">   
                    <p>您还没有创建名片，请快创建名片吧</p>
                    <button class="btn btn-primary" onclick="javascript:window.location.href='<%=path%>/api/bm/ui/companyCard?type=create';">创建名片</button>
                </div>
      		    <div class="m_xpages" style="width:100%;margin:0;">
					<div class="mian">
						<span>显示行数</span> <select><option>5</option>
							<option>10</option>
							<option>20</option></select> <span>共80条</span> <span>1/4页</span> <a
							href="javascript:;" class="prev">上一页</a> <a href="javascript:;"
							class="next">下一页</a> <span>前往</span> <input type="text" value="1"
							class="text"> <span>页</span>
					</div>
				</div>
            </div> --%>
            
            <div class="col-sm-12 " style="margin-top:20px;">
                <div class="ibox float-e-margins white-bg">
                    <div class="table-responsive">
                        <table class="display  table-striped table-bordered " id="mydataTable">
                            <thead>
                                <tr>
                                   
                                    <th>名片概览</th>
                                    <th class="sendTotal" >手机号码</th>
                                    <th>打开数</th>
                                    <th class="sendTime">操作列</th>
                                </tr>
                            </thead>
                            <tbody style="font-size:15px">
                               
                            </tbody>
                        </table>
                        
                    </div>                 
                </div>
            </div>
            
        </div>
    </div>
</div>
<div hidden="" class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">扫一扫立刻分享</h4>
            </div>
            <div class="modal-body text-center">
               <div  id="qrcode"></div>
            </div>


        </div>
    </div>
</div>   
    	
      <script src="<%=path%>/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="<%=path%>/hplus/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="<%=path%>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jasny/jasny-bootstrap.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
    <script src="<%=path%>/hplus/js/plugins/switchery/switchery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path%>/hplus/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/clockpicker/clockpicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/cropper/cropper.min.js"></script>
    
    <script type="text/javascript" src="<%=path%>/hplus/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script src="<%=path%>/hplus/js/demo/form-advanced-demo.min.js"></script>
	<script src="<%=path%>/hplus/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>

    <script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	   	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script>
        $(function(){
          $('.selectBox ul li').on('click',function(){
            var text = $(this).text();
            $(this).parents('.select').find('span').text(text);
          });          
          $('.select').on('click',function(e){
            e.stopPropagation();
            $(this).toggleClass('selectState');
            if(!$(this).hasClass('selectState')){
              $('.select').removeClass('selectState');
              $(this).find('img').attr('src','images/dropDown.png');
            }else{
              $(this).find('img').attr('src','images/dropUp.png');
            }
          });
            $('body').on('click',function(){
                $('.select').removeClass('selectState');
                $('.select').find('img').attr('src','images/dropDown.png');
            })
            $('.select').each(function(index,ele){
                var stateText = $(ele).find('span').text();
                $('.selectBox').eq(index).find('ul li').each(function(indexsLi,elesLi){
                    if($(elesLi).text()==stateText){
                        $(elesLi).addClass('on')
                    }
                });
            });

            $('.s_cancel,.issue_delect span').click(function(){
                $('.s_popup_delect,.issue_delect').hide();
            });

            $('.k_ty_btn').click(function(){
                $('.s_popup_delect1,.issue_delect1').show();
            });

            $('.s_cancel1,.issue_delect1 span').click(function(){
                $('.s_popup_delect1,.issue_delect1').hide();
            });

            $('.k_red').click(function(){
                $('.s_popup_delect2,.s_consum').show().delay(3000).fadeOut();
            });

            $('.s_hot_box .s_hot_con').mouseover(function(){
                $(this).find('h4').css({'color':'#03a9f4','text-decoration':'underline'});
                $(this).css({'cursor':'pointer'})
            });

            $('.s_hot_box .s_hot_con').mouseout(function(){
                $(this).find('h4').css({'color':'#666','text-decoration':'none'});
            });
        });        
    </script>
    
    <script type="text/javascript">
     $.fn.dataTable.ext.errMode = 'none';
     var startIndex = 0;
     var pageSize = 5;
     var access_token=$.cookie('access_token');
	 var cid=$.cookie('cid');
	 var uid=$.cookie('uid');
	 var status;
	 
	 var myDataTable;
	 var web_url;
	 var mangageId;
	 var keyWord="";
	 var path = "<%=path%>";

       $('.x_popup .issue span').click(function () {
            $('.x_popup').hide();
           $('.issue').hide(); 
       });
	 
	 $('.k_delect_btn').click(function(){
	    $('.s_popup_delect,.issue_delect').show();
	 }); 

     $('.s_cancel,.issue_delect span').click(function(){
         $('.s_popup_delect,.issue_delect').hide();
     });
	 
	 //删除
     $(document).on('click', '.k_delect_btn', function() {
    	 mangageId=$(this).attr("card_id");
    	 deletedDilog();
	 });
     //复制
     $(document).on('click', '.copyCard', function() {
    	 var mangageId=$(this).attr("card_id");
    	 window.location.href="<%=path%>/view/ui/companyCard?type=copy&card_id="+mangageId;
	 });
     //编辑
     $(document).on('click', '.editCard', function() {
    	 var mangageId=$(this).attr("card_id");
    	 window.location.href="<%=path%>/view/ui/companyCard?type=edit&card_id="+mangageId;
	 });
     //分享
     $(document).on('click', '.k_ty_btn', function() {
    	 $('#qrcode').html("");
   	    var web_url=$(this).attr("web_url");
   	    shareCard(web_url);
   	   
	 }); 
	 
     //选定要分享的名片
     $(document).on('click', '.card_click', function() {
       	$(".card_click").prop("src","<%=path%>/images/marketing/card_click_no.png");
       	$(this).prop("src","<%=path%>/images/marketing/card_click.png");
       	
       	// setShareCard(this.id);          无意义代码 - Yangcl
	 });
     
     
     $(function(){
    	 init();
     });
	 <%-- $(function(){
		 getCardList()
	 });
    //获取列表
     function getCardList(){
         var keyWord = $("#keyWord").val();
    	var url = "<%=path%>/businessCard/queryCardList";
     	$.post(url, {
            "startIndex" : startIndex,
            "pageSize" : pageSize,
            "cid" : cid,
            "uid" : uid,
            "access_token" : access_token,
            "status" : status,
            "keyWord" : keyWord
 			}, function(data) {
 				var msg;
 				console.log(data.error_code);
 				if(data.status == 200){
 					
 					setHtml(data.data);
 					page(data.totalCount);
 				}else if(data.error_code=="20028"){
 					loginDialog();
 				}else if(data.error_code=="20027"){
                    $('#content_empty').hide();
                    $('.m_xpages').hide();
                    setHtml("");
                    $('#card_list').html('<p align="center" style="color: #980c10"><strong>没有找到相关的信息</strong></p>');
                }else{
                    $('#content_empty').show();
                    $('.m_xpages').hide();
                }
 			});
     } --%>
     
     
     function init(){
     	myDataTable = dataTable();
     	
     }
     
     function func_dataTableReload(){
     	myDataTable.ajax.reload(function(){
     		// $(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
     		// $('input').iCheck('uncheck');
     	});
     }
     
     // 图片加载失败则替换为默认图片 - Yangcl
     function loadDefalutImage(e){
    	 var src_ = "<%=basePath%>/images/marketing/img_load_error.png";  
    	 $(e).attr("src" , src_);
     }
     
     function parseUrl(url) {
    	    var a =  document.createElement('a');
    	    a.href = url;
    	    return {
    	        source: url,
    	        protocol: a.protocol.replace(':',''),
    	        host: a.hostname,
    	        port: a.port,
    	        query: a.search,
    	        params: (function(){
    	            var ret = {},
    	                seg = a.search.replace(/^\?/,'').split('&'),
    	                len = seg.length, i = 0, s;
    	            for (;i<len;i++) {
    	                if (!seg[i]) { continue; }
    	                s = seg[i].split('=');
    	                ret[s[0]] = s[1];
    	            }
    	            return ret;
    	        })(),
    	        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
    	        hash: a.hash.replace('#',''),
    	        path: a.pathname.replace(/^([^\/])/,'/$1'),
    	        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
    	        segments: a.pathname.replace(/^\//,'').split('/')
    	    };
    	}
     
     function dataTable(){
     	return $('#mydataTable').DataTable({
     		processing: true,
     		ordering: false,
     		searching: false,
     		info: true,
     		autoWidth: true,
     		lengthChange: false,
     		"order": [[ 2, "desc" ]],
     	    language: {
     	    	emptyTable: '没有数据',
     	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
     			infoEmpty: '没有数据',
     			lengthMenu: '每页显示 _MENU_ 条记录',
     			loadingRecords: '正在加载数据....',
     			processing: '正在处理数据....',
     			zeroRecords: '没有找到匹配的记录',
     			paginate: {
     				first: '首页',
     				previous: '前页',
     				next: '后页',
     				last: '尾页'
     			}
     	    },
     	    order: [[1,'desc']],
     		pageLength: 10,
     	    pagingType: 'full_numbers',
     	    columnDefs: [{
     			render: function(data, type, full) {
     				var parse = parseUrl(window.location.href);  
     				var path = 'view/ui/cardPreview?card_id='; 
     				if("scrm_sps" == parse.segments[0]){                   // 本地调试模式
     					path = '/' + parse.segments[0] +  '/' + path; 
     				}else{
     					path = "http://" + parse.host + "/" + path;    
     				}
     				
                    var  result = '<div style="height: 142px;padding-top:30px;" class=""><div class="col-sm-4"><img style="width:20px;float:left;margin-top:20px;" class="card_click" >' 
                    + '<img style="height:60px;width:60px;margin:0 0 0 6px;border-radius:50%;" onerror="loadDefalutImage(this)" src="'+full.headPicture+'"></div><h5 >' 
                    + '<a href="' + path + full.cardId + '">'
                 	+ '<font color="#1ab394" style="font-size:15px">'+full.name+'</font></a></h5><h5>'+full.companyName+'</h5><h5>'+full.job+'</h5></div>';
     				return result;
                 },
     			targets: 0
     		},{
     			render: function(data, type, full) {
                    var result='';
                    result='<td><a web_url="'+full.url+'" href="javascript:;" class="k_ty_btn" data-toggle="modal" data-target="#myModal5"><font color="#1ab394">分享</font></a><br>'
                    <shiro:hasPermission name="markting_business_card:copy">
                    + '<a card_id="'+data+'" class="copyCard" href="javascript:;"><font color="#1ab394">复制</font></a><br>'
                    </shiro:hasPermission>
                    <shiro:hasPermission name="markting_business_card:update">
                    + '<a card_id="'+data+'" class="editCard" href="javascript:;"><font color="#1ab394">编辑</font></a><br>'
                    </shiro:hasPermission>      
                    <shiro:hasPermission name="markting_business_card:delete">
                    + '<a card_id="'+data+'" href="javascript:;" class="k_delect_btn"><font color="#1ab394">删除</font></a>'
                    </shiro:hasPermission>
                    +'</td>';
     				return result;
                 },
     			targets: 3
     		}],
     	    columns: func_columns(),
     	    serverSide: true,
     	    ajax: {
     	    	contentType: 'application/json;charset=utf-8',
     	    	type: 'POST',
     	    	url: func_AjaxUrl(),
     	    	data: function(d){
     	    		d.keyWord=keyWord;
     				return JSON.stringify(d);
     			}
     		} ,
     	    "initComplete": function(settings, json) {
     	    	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
     	    	var info=myDataTable.page.info(); 
                 if(json.error_code=="20028"){
                 	loginDialog();
                 }else{
                	 if(info.recordsTotal<1){
                 		createDialog();
                 	}
                 }     	    	
             	
                 imageLoadError();
     	    }
     	});
     	
     }
     
     function func_AjaxUrl(){
     	return path+"/businessCard/ajaxCardList";
     }
     /**
      *	设置列名，对应后台
      */
     function func_columns(){
     	var jsonArr = [
     		{"data":"name"},
     		{"data":"mobile"},
     		{"data":"browseNum"},
     		{"data":"cardId"},
     		
     	];
     	return jsonArr;
     }
     function createDialog(){
     	swal({
     		  title: '创建名片?',
     		  text: "您暂未创建名片，请尽快创建名片吧!",
     		  type: 'warning',
     		  showCloseButton: true,
     		  confirmButtonColor: '#1ab394',
     		  
     		  confirmButtonText: '立即创建'
     		}).then(function () {
     			window.location.href='<%=path%>/view/ui/companyCard?type=create&model_id=2';
     		})
     }
    
     function deleteCard(){
    	$('.s_popup_delect,.issue_delect').hide();
    	var lineId="#line"+mangageId;
    	var url = "<%=path%>/businessCard/ajaxDeleteCardById";
      	$.post(url, { 
  				"id" : mangageId,
  			}, function(data) {
  				if(data.status == 200){
  			       $(lineId).remove();
  			       func_dataTableReload();
  			       successDialog("删除成功！","");
  				}else {
  					errorDialog(data.message);
  				}
  				
  			});
     }
     //选定要显示的名片
     function setShareCard(id){
    	 var url = "<%=path%>/businessCard/sharecard";
       	$.post(url, {
   				"cid" : cid,
   				"uid" : uid,
   				"access_token" : access_token,
   				"card_id" : id,
   			}, function(data) {
   				
   			});
     }
    
    
	function shareCard(longUrl){
		var url="<%=path%>/activity/ajaxLongUrlToShort";
		$.post(url, {
			"access_token" : access_token,
			"cid" : cid,
			"uid" : uid,
			"longUrl" : longUrl,
		}, function(data) {
			if (data.status == 200) {
				var shortUrl=data.data;
				$('#qrcode').html("");
           	    jQuery('#qrcode').qrcode(shortUrl);
           	    $('#myModal5').modal('show');
			}else if(data.error_code=="20028"){
				loginDialog();
        	}else{
        		errorDialog(data.message);
        	}
		});
    }
<%-- 	function showDialog(title){
		$('#dialog_title').html('<img src="<%=path%>/images/marketing/s_tick.png"/>'+title+''); 
		$('.s_popup_delect2,.s_consum').show().delay(1000).fadeOut();
	} --%>
	
	function deletedDilog(){
		swal({
			  title: '您确定要删除此名片吗?',
			  text: "删除后将无法恢复，请谨慎操作！",
			  type: 'warning',
			  showCancelButton: true,
			  confirmButtonColor: '#d33',
			  cancelButtonColor: '#3085d6',
			  confirmButtonText: '删除',
			  cancelButtonText:'取消'
			}).then(function () {
				deleteCard();
			})
	}

	$("#selectCardListByName").click(function (){
		keyWord = $("#keyWord").val();
		func_dataTableReload();
    })
    </script>
</body>
</html>